<template>
  <div>
    <div id="div3">
      <el-table
          :data="tableData1"
          border
          style="width: 81.7%">

        <el-table-column
            label="用户建议"
            prop="title"
            width="675">
        </el-table-column>
        <el-table-column
            label="操作"
            width="350">
          <template #default="scope">
            <el-button @click="checkadvicebyid(scope.row)">查看</el-button>
            <el-button @click="open2(scope.row)">回复</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog v-model="orderInfo1" title="历史意见查看" :before-close="close1" class="dialog1">
        <template #footer>
          <div class="content-h">
            <p >内容:{{tableData2.content}}</p>
          </div>
        </template>
        <el-button @click="close1()" class="content-hb">关闭</el-button>
      </el-dialog>

      <el-dialog v-model="orderInfo2" title="我的回复" :before-close="close2" class="dialog1">
        <template #default="scope">
        <el-form-item label="回复">
          <el-input type="textarea"  v-model="reply"></el-input>
        </el-form-item>
        <el-button type="primary" @click="replybyid(scope.row)">发布</el-button>
        <el-button @click="close2()">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
  </template>
  
  <script>
  import request from "@/utils/request";
  import { method } from "lodash";
  import row from "element-ui/packages/row";
  
  
  export default {
    name: "OrderHistory",
    data(){
    return{

     changeInfo: false,
     AfterSale:[
     ],
      orderInfo1:false,
      orderInfo2:false,
      tableData1: [],
      tableData2:  {
        id:'',
        title:'',
        reply:'',
        content:'',
      },
      title: '',
      content: '',
      reply:'',
      id:'',
    }
  },
    methods:{
      formatData(row, column, cellValue, index) {

        //把传过来的日期进行回炉重造一下，又创建了一个js的 Date对象，进行重新构造，转为String字符串
        //最终返回 s 就可以了
        var s = new Date(cellValue).toLocaleString();
        return s;
      },
      showadvice(){
        request.get("http://localhost:8082/user/showadvice").then(res => {
          if (res.flag) {
            this.tableData1 = res.data;
            this.$message({
              type: 'success',
              message: res.msg
            })
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      replybyid(row){
        request.post("http://localhost:8082/user/replybyid?id="+this.id+"&reply="+this.reply).then(res =>{
          if (res.flag) {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
          else {
            this.$message.error(res.msg);
          }
        })
      },
      checkadvicebyid(row){
        this.orderInfo1=true;
        this.id=row.id
        console.log("nn",row)
        request.get("http://localhost:8082/user/checkadvicebyid?id="+this.id).then(res => {
          if (res.flag) {
            this.tableData2 = res.data;
            this.$message({
              type: 'success',
              message: res.msg
            })
          } else {
            this.$message.error(res.msg);
          }
        })
      },
    open() {
        this.changeInfo = true;
      },
    change(){
        this.changeInfo = false;
    },
      open1(row) {
        this.orderInfo1=true;
      },
      close1() {
        this.orderInfo1 = false;
      },
      open2(row) {
        this.orderInfo2=true;
        this.id1=row.id;
      },
      close2() {
        this.orderInfo2= false;
      },
   },
   created() {
    this.showadvice()
   },
  }
  </script>
  
  <style scoped>
  .div2{
    background-size: 100% ;
    float: left;
    margin-top: -200px;
  }
  .b3{
    margin-bottom: 20px;
  }
  .dialog1{
    z-index: 2;
  }
  .content-h{
    margin-top: -160px;
  }
  .content-hb{
    margin-top: 140px;
  }
  </style>